@import '@material/fab/mixins.import';
@import '@material/button/variables.import';
@import '@material/theme/variables.import';
@import '../mdc-helpers/mdc-helpers';
@import '_button-base';

@include mdc-fab-without-ripple($query: $mat-base-styles-query);

.mat-mdc-fab, .mat-mdc-mini-fab {
  @include mat-private-button-interactive();
  @include mat-private-button-disabled();

  // MDC adds some styles to fab and mini-fab that conflict with some of our focus indicator
  // styles and don't actually do anything. This undoes those conflicting styles.
  &:not(.mdc-ripple-upgraded):focus::before {
    background: transparent;
    opacity: 1;
  }

  // MDC expects the fab icon to contain this HTML content:
  // ```html
  //   <span class="mdc-fab__icon material-icons">favorite</span>
  // ```
  // However, Angular Material expects a `mat-icon` instead. The following
  // will extend the `mdc-fab__icon` styling to the mat icon. Note that
  // the extended styles inherently only match icons that nest themselves in
  // a parent `mdc-fab`.
  .mat-icon {
    @extend .mdc-fab__icon;
  }
}

